<div class="row spacing-bottom 2col">   
    <div class="col-md-3 col-sm-6 spacing-bottom-sm">   
        <div class="tiles green added-margin">
          <div class="tiles-body">
                <div class="tiles-title">
                    分类总数
                </div>  
                <div class="heading">
                    <span><?= $total ?></span>个
                </div>             
                <div class="description">
                    <h4 class="mini-description ">
                        <i class="icon-plus-sign"></i>&nbsp;
                        <a class="white" href="javascript:void(0)" onclick="$.Category.add()">新增一个分类</a>
                    </h4>
                </div>
            </div>  
        </div>
    </div>              
</div>

<div class="row">
    <div class="col-md-12">
            <div class="grid simple">
                <div class="grid-title no-border">
                    <h4>分类 <span class="semi-bold">列表</span></h4>
                    <div class="tools">
                        <a class="collapse" href="javascript:;"></a>
                    </div>
                </div>
                <div class="grid-body no-border">
                    <div class="cf nestable-lists">
                        <div id="nestable" class="dd">
                            <? if($list): ?>
                                <ol class="dd-list">
                                <? foreach($list as $item): ?>
                                    <li class="dd-item" data-id="<?= $item['category_id'] ?>">
                                        <div class="dd-tool">
                                            <? if($item['status'] == CATEGORY_STATUS_OFF): ?>
                                                <a href="javascript:void(0)" onclick="$.Category.change_status('<?= $item['category_id']?>', 'on');" >
                                                    <i class="icon-rocket"></i>
                                                    启用
                                                </a>
                                            <? else: ?>
                                                <a href="javascript:void(0)" onclick="$.Category.change_status('<?= $item['category_id']?>', 'off');" >
                                                    <i class="icon-ban-circle"></i>
                                                    停用
                                                </a>
                                                &nbsp;
                                                <a onclick="$.Category.edit('<?= $item['category_id']?>')" href="javascript:void(0)">
                                                    <i class="icon-paste"></i>
                                                    编辑
                                                </a>
                                            <? endif ?>
                                        </div>
                                        <div class="dd-handle">
                                            <?= $item['name'] ?>
                                        </div>
                                        <? if($item['children']): ?>
                                            <ol class="dd-list">
                                                <? foreach($item['children'] as $c): ?>
                                                    <li class="dd-item" data-id="<?= $c['category_id'] ?>">
                                                        <div class="dd-tool">
                                                            <? if($c['status'] == CATEGORY_STATUS_OFF): ?>
                                                                <a href="javascript:void(0)" onclick="$.Category.change_status('<?= $c['category_id']?>', 'on');" >
                                                                    <i class="icon-rocket"></i>
                                                                    启用
                                                                </a>
                                                            <? else: ?>
                                                                <a href="javascript:void(0)" onclick="$.Category.change_status('<?= $c['category_id']?>', 'off');" >
                                                                    <i class="icon-ban-circle"></i>
                                                                    停用
                                                                </a>
                                                                &nbsp;
                                                                <a onclick="$.Category.edit('<?= $item['category_id']?>')" href="javascript:void(0)">
                                                                    <i class="icon-paste"></i>
                                                                    编辑
                                                                </a>
                                                            <? endif ?>
                                                        </div>
                                                        <div class="dd-handle">
                                                            <?= $c['name'] ?>
                                                        </div>
                                                    </li>
                                                <? endforeach ?>
                                            </ol>
                                        <? endif ?>
                                        
                                    </li>
                                <? endforeach ?>
                                </ol>
                            <? endif ?>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                    <div class="form-actions">
                        <div class="pull-left">
                            <button onclick="$.Category.submit(this)" type="button" class="btn btn-success btn-cons">
                                <i class="icon-save"></i>&nbsp;保存
                            </button>
                        </div>
                    </div>
                </div>
            </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        // 排序
        $('#nestable').nestable({
            maxDepth: 2,
        });
    });

    $.Category = {

        submit: function(obj)
        {
            var category = $('#nestable').nestable('serialize');
            $.ajax({
                url     : $.G.domain+"category/batch_edit/?is_ajax=1&data="+encodeURI($.toJSON(category)),
                dataType: 'json',
                type    : 'get',
                async   : false,
                beforeSend: function(){
                    $('#nestable').hide();
                    $(obj)
                        .attr('disabled', true)
                        .html("&nbsp;保存中，请稍候。。。");
                },
                success: function(response){
                    $.T.alert(response.msg, function(){
                        $.T.refresh();
                    });
                }
            });
            
        },

        add: function()
        {
            var opt = {width: 800,height:600, lock: true, opacity: 0.75, title: '<h3>新增 <span class="semi-bold">分类</span></h3>', close: function(){$.T.refresh()}}; 
            $.dialog.open($.G.domain+'category/add', opt, false)
        },

        edit: function(id)
        {
            if( $.T.empty(id) )
            {
                $.T.alert("编辑分类失败：没有提供分类id。");
                return false;
            }
            var opt = {width: 800,height:500, lock: true, opacity: 0.75, title: '<h3>编辑 <span class="semi-bold">分类</span></h3>'}; 
            $.dialog.open($.G.domain+'category/edit/'+id, opt, false)
        },

        /**
         * [改变状态]
         */
        change_status: function(id, act)
        {
            if( $.T.empty(id) )
            {
                $.T.alert("修改分类状态失败：没有提供分类id。");
                return false;
            }
            if( $.T.empty(act) )
            {
                $.T.alert("修改分类状态失败：没有提供操作类型。");
                return false;
            }
            $.T.confirm('确认要执行这个操作么？', function(){
                $.getJSON($.G.domain+"category/change_status/"+id+"/?act="+act+"&is_ajax=1", function(response)
                {
                    if( false == response.status)
                    {
                        $.T.alert(response.msg);
                    }
                    else
                    {
                        $.T.refresh();
                    }
                });
            });
        }
    }
</script>